<template>
	<view class="spot-box margin-top-xs u-flex u-flex-center" :style="[contStyles]">
		<view v-for="item,index in nums" :key="item" class="spot"
		 :style="[{backgroundColor: `${activeIndex == index? activeColor: color}`, width: spotWidth, height: spotHeight}]"
		 :class="{'active': activeIndex == index}"></view>
	</view>
</template>

<script>
	export default {
		name:"swiper-spot-bar",
		props: {
			activeIndex: {
				type: [String,Number],
				default: 0
			},
			nums: {
				type: [String,Number],
				default: 2
			},
			contStyles: {
				type: Object,
				default:()=>({})
			},
			color:{
				type: String,
				default: '#bababa'
			},
			activeColor: {
				type: String,
			},
			spotWidth: {
				type: String,
				default: '8rpx'
			},
			spotHeight: {
				type: String,
				default: '8rpx'
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
.spot-box {
	.spot{
		border-radius: 50%;
		margin-left: 16rpx;
		&.active {
			@include themeBgColor;
			margin-left: 0;
		}
	}
}
</style>
